<template>
	<view class="container">
		<view class="search">
			<view class="serch_input">
				<input type="text" v-model="searchObj.text" />
			</view>
			<view class="search_btn">
				<button type="default" @click="searchObj.pageNum = 0,loadData()">搜索</button>
			</view>
		</view>
		<view class="coll_none" v-if="product_list.length ==0">
			暂无您想要的商品
		</view>
		<view class="coll" v-else>
			<view class="coll_list" v-for="(item,index) in product_list" @click="navTo('../../product/index?_id='+item._id)">
				<view class="coll_list_image">
					<image :src="item.produce_info.product_important_img" mode="scaleToFill"></image>
				</view>
				<view class="coll_list_title">
					<view class="coll_list_name">
						{{item.produce_info.name}}
					</view>
					<view class="coll_list_price">
						￥<text v-if="item.produce_info.product_max_price == item.produce_info.product_min_price">{{item.produce_info.product_max_price}}</text>
						<text v-else>{{item.produce_info.product_min_price}} - {{item.produce_info.product_max_price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/comon/api.js'
	export default {
		data(){
			return {
				searchObj:{
					product_type: 3,
					text:'',
					pageNum: 0,
					pageSize: 10
				},
				product_list:[
					
				]
			}
		},
		onLoad(option) {
			this.searchObj.text = option.text;
			this.loadData()
		},
		onReachBottom() {
			this.searchObj.pageNum += 1;
			this.loadData();
		},
		methods:{
			async loadData(){
				uni.showLoading({})
				let res = await api.uniCloudApi(api.publicFun.product,this.searchObj);
				if(res.length == 0){
					uni.hideLoading();
					return
				}
				if(this.searchObj.pageNum == 0){
					this.product_list = [];
				}
				this.product_list = this.product_list.concat(res);
				uni.hideLoading();
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.search{
		background-color: $uni-back-color;
		display: flex;
		height: 44px;
		width: 94%;
		padding: 0 3%;
		.serch_input{
			width: 75%;
			height: 35px;
			margin-top: 4.5px;
			input{
				width:90%;
				padding-left: 5%;
				background-color: #FFFFFF;
				height: 35px;
				line-height: 35px;
				border-radius: 17.5px;
			}
		}
		.search_btn{
			width: 25%;
			button{
				width: 80%;
				height: 35px;
				line-height: 35px;
				border: 0;
				margin-top: 4.5px;
				font-size: 27rpx;
				color: #FFFFFF;
				background-color: rgba(0,0,0,0);
				border-radius: 17.5px;
				background-color: #ff0091;
				&::after{
					border: 0;
				}
			}
		}
	}
	.coll_none{
		width: 100%;
		text-align: center;
		height: 800rpx;
		line-height: 800rpx;
		font-size: 45rpx;
		color: #d4d4d4;
	}
	.coll{
		width: 100%;
		.coll_list{
			width: 94%;
			margin-left: 3%;
			margin-top: 15rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			.coll_list_image{
				width: 200rpx;
				height: 200rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
			.coll_list_title{
				width: calc(100% - 250rpx);
				margin-left: 30rpx;
				.coll_list_name{
					width: 100%;
					line-height: 40rpx;
					height: 80rpx;
					overflow: hidden;
				}
				.coll_list_price{
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					margin-top: 80rpx;
					color: $uni-back-color;
					text{
						font-weight: bold;
						font-size: 31rpx;
					}
				}
			}
		}
	}
</style>
